<div class="panel panel-default" id="alarms_list">
    <div class="panel-heading">
        <h3 class="panel-title">All Alarms</h3>

        <!-- <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">–</span>
                <span class="expand-icon">+</span>
            </a>
        </div> -->
    </div>
    <div class="panel-body">

        <div class="table-responsive" data-pattern="priority-columns"
            data-focus-btn-icon="fa-asterisk" data-sticky-table-header="true"
            data-add-display-all-btn="true" data-add-focus-btn="true">

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Severity</th>
                            <th>Title</th>
                            <th>Summary</th>
                            <th>Occurred_at</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="alarm in alarms">
                        <td>
                        <span v-show="alarm.severity == 'critical'" class="badge badge-danger">{{ alarm.severity}}</span>

                        <span v-show="alarm.severity == 'warning'" class="badge badge-warning"> {{ alarm.severity}}</span>
                        
                        <span v-show="alarm.severity == 'error'" class="badge badge-info">{{ alarm.severity}}</span>
                        </td>
                        <td>{{ alarm.title}}</td>
                        <td>{{ alarm.summary}}</td>
                        <td>{{ alarm.occurred_at}}</td>
                        </tr>
                    </tbody>
                </table>

        </div>
    </div>
</div>
